<template>
  <div class="riskTable-root">
    <formTitleVue title="风险统计信息" />
    <div style="padding:10px 0;">
      <el-date-picker
        v-model="searchForm.time"
        type="month"
        value-format="yyyy-MM"
        @change="changeMonth">
      </el-date-picker>
      <el-select
        style="margin-left: 10px"
        v-model="searchForm.bclassify"
        @change="changeBclassify"
        placeholder="请选择"
      >
        <el-option
          v-for="item in bclassifyList"
          :key="item.code"
          :label="item.label"
          :value="item.code"
        >
        </el-option>
      </el-select>
      <el-button @click="handleExport" style="float: right" type="primary">导出数据</el-button>
    </div>
    <el-table
      :data="tableData"
      class="table"
      height="30vh"
      border
      style="width: 100%">
    >
      <el-table-column
        v-for="item in tableColumnList"
        :prop=item.prop
        :label=item.label>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import VTable from "@/components/VTable/index";
import ButtonForm from "@/components/ButtonForm/index";
import formTitleVue from "@/components/FormTitle/formTitle.vue";
import { time_select_optios } from '@/utils/global.js';
import {
  riskHazardInfoStatistics,
  riskHazardInfoStatisticsExport,
  riskHazardInfoStatisticsNew,
  riskHazardInfoStatisticsExportNew
} from '@/api/risk/riskHazard'
import { treeDataList } from '@/api/risk/treeData'
export default {
  name: "riskTable",
  components: {
    VTable,
    ButtonForm,
    formTitleVue,
  },
  data() {
    return {
      tableColumnList:[],
      tableData: [],
      loading: false,
      buttonList: [{name:'导出数据',methods:'handleExport', type:'primary'}],

      searchForm: {
        time: new Date().getFullYear() + "-" + (new Date().getMonth() + 1),// 当前月份
        startTime: this.$dayjs().startOf("month").format("YYYY-MM-DD"),
        endTime: this.$dayjs().endOf("month").format("YYYY-MM-DD"),
        areaCode:'',
        placeType:'',
        bclassify:'',
      },
      bclassifyList:[]
    };
  },
  methods: {
    changeMonth(item){
      console.log(item)
      this.searchForm.startTime=this.$dayjs(item).startOf("month").format("YYYY-MM-DD")
      this.searchForm.endTime=this.$dayjs(item).endOf("month").format("YYYY-MM-DD")
      this.getData();
    },
    changeBclassify(item){
      this.searchForm.bclassify = item
      this.getData()
    },
    // 触发按钮区域按钮方法
    clickButton(methods) {
      this[methods]();
    },
    handleExport() {
      riskHazardInfoStatisticsExportNew(
        this.searchForm,
        `风险统计信息_${new Date().getTime()}.xlsx`
      );
    },
    getData() {
      this.loading = true;
      this.searchForm.areaCode = this.$store.state.account.user.deptIds;
      this.searchForm.placeType = this.$commonJs.getPlaceType(this.searchForm.areaCode);
      riskHazardInfoStatisticsNew(this.searchForm).then((res) => {
        this.tableData=res.data.dataList
        this.tableColumnList=res.data.tableColumnList
        this.loading = false
      });
    },
    getBclassifyList(){
      treeDataList({name:"hazardBClassify"}).then(res=>{
        if(res.code==200) {
          this.bclassifyList = res.data.map(t=>{return {code:t.code, label:t.label}})
          this.bclassifyList.unshift({code:"", label:"全部"})
        }
      })
    }
  },
  created(){
    this.getBclassifyList()
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.riskTable-root {
  .search{
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    padding-top: 0;
  }
}
::v-deep .table-col-select-container{
  margin-bottom: 0px;
}
</style>
